<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<title>宽带订单查询</title>
<link rel="stylesheet" href="../template/assets/css/amazeui.min.css"/>
<link rel="stylesheet" href="../template/website/css/app.css"/>
<style type="text/css">
  body{
    background-color:#F4F3F2;
    /*background-color:red;*/
  }
  .am-list>.outter-li {
    position: relative;
    display: block;
    margin: 0;
    background-color: #fff;
    border: none;
  }
  .am-list-static>.outter-li {
    padding: .5rem 0;
    margin: 0 0 .5rem 0;
  }
  .bd-order-title-style{
    color: #ccc;
  }
  .border-bottom{
    border-bottom: 1px solid #dedede;
    border-width: 1px 0;
  }
  .order-list{
    background-color: transparent;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .order-list>li{
    position: relative;
    display: block;
    margin: 0 0 1rem 0;
    background-color: #fff;
    border: none;
    padding: .5rem 0.4rem;
  }
  *+ul {
     margin-top: 0; 
  }
</style>
</head>
<body>
  <div class="am-g am-topbar am-topbar-fixed-top am-padding-top-xs">
    <div class="am-input-group am-input-group-default">
      <span class="am-input-group-label am-text-sm" id="search-icon"><i class="am-icon-search"></i></span>
      <input type="text" class="am-form-field am-text-xs" placeholder="请输入姓名/手机号/订单号" id="keyword"/>
      <span class="am-input-group-label am-text-sm" id="search-btn">搜索</span>
    </div>
    <!-- <div class="am-u-sm-12 am-u-md-12">
      <div class="am-input-group">
        <span class="am-input-group-btn">
          <button class="am-btn am-btn-default am-text-sm" type="button" id="search-icon"><span class="am-icon-search"></span></button>
        </span>
        <input type="text" class="am-form-field am-text-xs" placeholder="请输入姓名/手机号/订单号" id="keyword"/>
        <span class="am-input-group-btn">
          <button class="am-btn am-btn-default am-text-sm" type="button" id="search-btn">搜索</button>
        </span>
      </div>
    </div> -->
  </div>
  <ul class="am-list am-list-static" id="broadband-order-list">
    <li class="am-text-xs am-text-center outter-li" style="background-color:#FFFFBB">全部共有<span class="am-text-danger" id="total-row">0</span>笔订单</li>
    <li class="outter-li" style="background-color: transparent;">
      <!--订单列表-->
      <ul id="order-list" class="order-list"></ul>
    </li>
    <!-- <li class="am-text-xs am-text-center am-margin-top-sm outter-li">
      <button type="button" class="am-btn am-btn-danger am-btn-block am-margin-vertical-sm am-text-sm" id="load-more">加载更多...</button>
      <button type="button" class="am-btn am-btn-default am-btn-block am-margin-vertical-sm am-text-sm am-hide" id="no-more">没有更多信息</button>
    </li> -->
  </ul>
  <button type="button" class="am-btn am-btn-danger am-btn-block am-margin-vertical-sm am-text-sm am-hide" id="load-more">加载更多...</button>
      <button type="button" class="am-btn am-btn-default am-btn-block am-margin-vertical-sm am-text-sm am-hide" id="no-more">没有更多信息</button>
  <!--订单列表模板-->
  <script type="text/x-handlebars-template" id="amz-tpl">
    {{#if list}}
      {{#list}}
        <li class="am-margin-top-sm">
          <div class="am-g am-padding-bottom-xs am-text-sm border-bottom">
            <div class="am-u-sm-4 am-text-left"><i class="am-icon-file-text-o"></i></div>
            <div class="am-u-sm-8 am-text-right">{{pay_status}}</div>
          </div>
          <!--店员信息-->
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">店员姓名</div>
            <div class="am-u-sm-8 am-text-sm">{{clerk_name}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">店员号码</div>
            <div class="am-u-sm-8 am-text-sm">{{clerk_mobile}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">订单编号</div>
            <div class="am-u-sm-8 am-text-sm">{{boss_no}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">订单类型</div>
            <div class="am-u-sm-8 am-text-sm">{{service_type}}</div>
          </div>
          <div class="am-g am-padding-vertical-xs border-bottom">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">下单时间</div>
            <div class="am-u-sm-8 am-text-sm">{{create_date}}</div>
          </div>
          <!--客户信息-->
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">客户姓名</div>
            <div class="am-u-sm-8 am-text-sm">{{customer_name}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">办理号码</div>
            <div class="am-u-sm-8 am-text-sm">{{customer_telephone}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">资费名称</div>
            <div class="am-u-sm-8 am-text-sm">{{bd_name}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">小区名称</div>
            <div class="am-u-sm-8 am-text-sm">{{rzl_bd_address}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">归属区县</div>
            <div class="am-u-sm-8 am-text-sm">{{rzl_bd_area}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">订单状态</div>
            <div class="am-u-sm-8 am-text-sm">{{rzl_bd_status}}</div>
          </div>
          <div class="am-g am-padding-top-xs">
            <div class="am-u-sm-4 am-text-xs bd-order-title-style">宽带状态</div>
            <div class="am-u-sm-8 am-text-sm">{{rzl_order_status}}</div>
          </div>
        </li>
      {{/list}}
    {{/if}}
  </script>
  <script type="text/javascript" src="../template/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="../template/assets/js/amazeui.min.js"></script>
  <script type="text/javascript" src="../template/assets/js/handlebars.min.js"></script>
  <script type="text/javascript" src="../template/assets/js/amazeui.widgets.helper.min.js"></script>
  <script type="text/javascript" src="../template/website/js/app.js"></script>
  <script type="text/javascript" src="../template/website/js/broadband.order.list.js"></script>
</body>
</html>